<template>  
  <div class="layout-container">  
    <div class="picture">
      <show_products></show_products>
    </div> 
    <el-backtop :right="50" :bottom="100"><returnTop></returnTop></el-backtop>
    <div class="activity"></div>  
    <div class="new"></div>  
    <div class="footer">
      <footerLzm></footerLzm>
    </div>  
  </div>  
</template>  

<script setup>  
import footerLzm from '@/views/footer-lzm'
import returnTop from '@/components/iconBywzy/returnTop.vue'
import show_products from '@/views/store-grc/components/show_products.vue'
</script>  

<style scoped lang='scss'>  
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-container {  
  display: flex;  
  flex-direction: column;
  width: 100%;   
  box-sizing: border-box;
  overflow-x: hidden; 
}  

.header, .top, .picture, .activity, .new, .footer {  
  width: 100%;  
}

.header {
  background-color: white;
  height: 120px;
}

.top {
  background-color: #e0e0e058;
  height: 70px;
  display: flex;
  align-items: center; 
  justify-content: flex-start; 
  padding: 0 12%;
}

.flex-item {
  flex: 1; 
  max-height: 100%; 
  margin-right: 5%;
}

.picture {
  background-color: #e0e0e058;
  height: auto;
}

// .activity {
//   background-color: #e0e0e058;
//   height: 500px;
// }

.new {
  background-color: #e0e0e058;
  height: 150px;
} 
</style>